import React, { useState } from 'react'
import { getListApi } from '../../api/jiek'
import { InfiniteScroll, Tag } from 'antd-mobile'
import { Button, NavBar, Space, Toast } from 'antd-mobile'
import { useLoaderData, useNavigate, useSearchParams } from 'react-router-dom'
import dayjs from 'dayjs'
import { Collapse } from 'antd-mobile'
import style from './home.module.css'
function Index() {
  const nav = useNavigate()
  const [sp] = useSearchParams()
  const start = sp.get('start')
  const end = sp.get('end')
  const { list } = useLoaderData()
  const pp = Object.fromEntries(sp)
  const [page, setPage] = useState(2)
  const [data, setData] = useState([])
  const [hasMore, setHasMore] = useState(true)
  async function loadMore() {
    const { data: list } = await getListApi({ ...pp, page })
    setData([...data, ...list])
    if (list.length == 0) {
      setHasMore(false)
    } else {
      setPage(prev => prev + 1)
    }
  }
  return (
    <div>
      <div style={{ color: '#fff', background: "#000" }}>
        <NavBar onBack={() => nav('/home')}>{start} - {end}</NavBar>
      </div>
      <div className={style.dd}>
        <Button style={{ color: '#fff', background: "#000" }}>前一天</Button>
        <span style={{ background: "#fff", padding: '10px' }}>{dayjs().format('MM-DD')}</span>
        <Button style={{ color: '#fff', background: "#000" }}>后一天</Button>
      </div>

      <div>
        <p style={{ margin: '10px' }}>已售完车票块</p>
        {
          data.map((item, index) => {
            return <div>
              {/* <p style={{ margin: '10px' }}>已售完车票块</p> */}
              <div key={index} className={style.row}
              onClick={()=>nav(`/xq?start=${item.dasn}&end=${item.aasn}&startTime=${item.dst}&endTime=
                ${item.ast}&cc=${item.aat}&time=${item.td}&price=${item.lps[0].atp}&id=${item.fId}`)}
              >
                <span className={style.pp}>{item.dst}</span>
                <span>{item.aat}</span>
                <span className={style.pp}>{item.ast}</span>
                <span></span>
                <span>{item.dasn}</span>
                <span>{item.td}</span>
                <span>{item.aasn}</span>
                <span className={style.price}>￥{item.lps[0].atp}</span>
                <span>二等座 有票</span>
                <span>一等座 有票</span>
                <span>特等座 18票</span>
              </div>
              <Collapse defaultActiveKey={['1']}>
                <Collapse key={index} title='有票车次' arrowIcon={  <Tag color='primary' fill='outline'>
            收起
          </Tag>} defaultActiveKey>
                  <div key={index} className={style.row}>
                    <span className={style.pp}>{item.dst}</span>
                    <span>{item.aat}</span>
                    <span className={style.pp}>{item.ast}</span>
                    <span></span>
                    <span>{item.dasn}</span>
                    <span>{item.td}</span>
                    <span>{item.aasn}</span>
                    <span className={style.price}>￥{item.lps[0].atp}</span>
                    <span>二等座 有票</span>
                    <span>一等座 有票</span>
                    <span>特等座 18票</span>
                  </div>
                </Collapse>

              </Collapse>

            </div>
          })
        }

        <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />

      </div>
    </div>
  )
}

export default Index
export const loader = async ({ request }) => {
  const url = new URL(request.url)
  const data = Object.fromEntries(url.searchParams)
  const { data: res } = await getListApi(data)
  console.log(res);
  return { list: res }

}